<template>
<div>
  <div class="sheji">
    <img src="../assets/images/sheji.png" alt="" />
    <img src="../assets/images/kaifa.png" alt="" />
    <img src="../assets/images/yuanyuzhou.png" alt="" />
  </div>
  <div class="daa" ref="wrap"></div>

</div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

let ranking1 = `src/assets/images/red.png`
let ranking2 = `src/assets/images/organge.png`
let ranking3 = `src/assets/images/green.png`

let xdata = {
  value: ['北京', '上海', '浙江', '广东']
}
let sdata = {
  value: [11, 9, 8, 6, 4, 3, 1]
}
let option = ref({
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    containLabel: true,
    bottom: '5%',
    left: '5%',
    top: '5%',
    right: '5%'
  },
  xAxis: {
    type: 'value',
    axisLabel: {
      show: false
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    }
  },
  yAxis: [
    {
      type: 'category',
      data: xdata.value,
      inverse: true,
      axisLabel: {
        fontSize: '18px',
        inside: false,
        verticalAlign: 'center',
        padding: [5, 0, 0, 0],
        margin: 20, //刻度标签与轴线之间的距离
        formatter: function (value, index) {
          if (index < 3) {
            return `{img${index}|} {a|${value}}`
          } else {
            return `{b|${index + 1}}{a|${value}}`
          }
        },
        rich: {
          a: {
            fontSize: '14px',
            color: '#666666',
            fontFamily: 'SourceHanSansCN-Regular',
            padding: [4, 0, 0, 15],
            width: 50
          },
          b: {
            fontSize: '18px',
            fontFamily: 'Barlow Condensed SemiBold',
            color: '',
            padding: [4, 15, 0, 15]
          },
          img0: {
            width: 34,
            height: 24,
            backgroundColor: {
              image: ranking1
            }
          },
          img1: {
            width: 34,
            height: 24,
            backgroundColor: {
              image: ranking2
            }
          },
          img2: {
            width: 34,
            height: 24,
            backgroundColor: {
              image: ranking3
            }
          }
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: 'white'
        }
      }
    },

    {
      type: 'category',
      data: xdata.value,
      inverse: true,
      axisLabel: {
        inside: false,
        verticalAlign: 'center',
        padding: [5, 0, 0, 0],
        margin: 20, //刻度标签与轴线之间的距离
        formatter: function (value, index) {
          return `{a|${sdata.value[index]}}`
        },
        rich: {
          a: {
            fontSize: 18,
            fontFamily: 'Barlow Condensed SemiBold',
            color: 'white',
            padding: [4, 0, 0, 0]
          }
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#13387a'
        }
      }
    }
  ],
  series: [
    {
      data: sdata.value,
      type: 'bar',
      barWidth: 10,
      showBackground: true,
      backgroundStyle: {
        color: '#0c1d5f'
      },
      itemStyle: {
        borderRadius: 40,
        color: '#307eff'
      }
    }
  ]
})

let wrap = ref('')

onMounted(() => {
  let myChart = echarts.init(wrap.value)
  myChart.setOption(option.value);

  window.addEventListener('resize',function(){
    myChart.resize()
  })
})
</script>


<style scoped>
.sheji {
  width: 100%;
  height: 50px;
}
.sheji img {
  width: 80px;
  height: 35px;
  margin-left: 33px;
  margin-top: 10px;
}

.daa{
    width: 400px;
    height: 200px;
    /* background: red; */
}
</style>


